<template>
    <el-dialog v-model="accountFormVisible" width="600px" :before-close="handleClose">
        <div class="account-tip">
            <div class="title">{{ appInfo.name }}申请以下权限：</div>
            <div class="desc">使用您在数字空间的数字身份信息</div>
            <div class="operate-box">
                <div><el-button type="primary" class="o-btn" @click="agreenAuth">同意</el-button></div>
                <div><el-button type="outline-blue" class="o-btn" @click="denyAuth">拒绝</el-button></div>
            </div>
        </div>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const accountFormVisible = ref(false)
const appInfo = ref()

const init = (info: any) => {
    accountFormVisible.value = true
    appInfo.value = info
}


const handleClose = () => {
    accountFormVisible.value = false
}

const handleHref = () => {
    window.open(appInfo.value.link, '_blank')
}
const emit = defineEmits(["agreenAuth"])
const agreenAuth = () => {
    // handleHref()
    emit("agreenAuth",appInfo.value)
    // handleClose()

}

const denyAuth = () => {
    ElMessage.warning('您拒绝了授权')
    handleClose()
}
defineExpose({
  init,
  handleClose
})



</script>
<style lang='scss' scoped>
$textColor: #262626;
.account-tip {
    margin-top: 22px;
    margin-bottom: 55px;
    text-align: center;
   .title {
        font-size: 15px;
        font-weight: 400;
        color: #262626;
        line-height: 20px;
        letter-spacing: 1px;
        margin-bottom: 34px;
   }
   .desc {
        font-size: 13px;
        font-weight: 400;
        color: #262626;
        line-height: 20px;
   }
   .operate-box {
        margin-top: 24px;
        .o-btn {
            padding: 7px 117px;
            margin-bottom: 15px;
            font-size: 13px;
        }
   }
}

</style>